import { reactive } from 'vue';
import { Component, Vue } from 'vue-facing-decorator';
import { BasicTable, TableAction, useTable } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import { useModal } from '@/components/Modal';
import AccountModal from './account.modal.vue';
import DeptTree from './dept.tree.vue';
import { useGo } from '@/hooks/web/usePage';
import { tableProps } from '@2/views/home/system/account/account.data';

const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, updateTableDataRecord, getSearchInfo }] = useTable(tableProps);
/**
 * @program: microservice-central-portal
 * @description: 系统账号管理模块
 * @author: baiHoo.chen
 * @create: 2022年5月24日
 **/
@Component({
  name: 'Account',
  components: { BasicTable, PageWrapper, TableAction, AccountModal, DeptTree },
})
export default class Account extends Vue {
  registerModal = registerModal;
  registerTable = registerTable;
  searchInfo = reactive<Recordable>({});
  go = useGo();
  handleCreate() {
    openModal(true, {
      isUpdate: false,
    });
  }
  handleEdit(record: Recordable) {
    console.log(record);
    openModal(true, {
      record,
      isUpdate: true,
    });
  }
  handleDelete(record: Recordable) {
    console.log(record);
  }
  handleExport() {
    console.log(getSearchInfo());
  }
  handleSuccess({ isUpdate, values }) {
    if (isUpdate) {
      // 演示不刷新表格直接更新内部数据。
      // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
      const result = updateTableDataRecord(values.id, values);
      console.log(result);
    } else {
      reload();
    }
  }
  handleSelect(deptId = '') {
    this.searchInfo.deptId = deptId;
    reload();
  }
  handleView(record: Recordable) {
    this.go('/system/account_detail/' + record.id);
  }
}
